<template>
  <div class="newWindow">
    <div class="conten">
      <h4 class="T-title flexBetween">
        {{ $t('licence.equip_title') }}
      </h4>
      <!-- 添加设备按钮 -->
      <div class="content">
        <el-button type="primary" @click="addShow">{{ $t('licence.equip_add') }}</el-button>
        <el-button type="primary" v-if="GatewayList.length" @click="delAllInveters(GatewayList[0].id)">{{$t('licence.delAll')}}</el-button>
        <div>
          <el-table :data="GatewayList" style="width: 100%; margin-top: 10px" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center', background: '#F6F8FA',}">
            <el-table-column prop="gatewayName" :label="$t('licence.equip_name')"></el-table-column>
            <el-table-column prop="lable" :label="$t('licence.equip_lable')"></el-table-column>
            <el-table-column :label="$t('licence.fau_operation')">
              <template #default="scope">
                <el-button @click="unbound(scope.row)" type="text" size="small" style="color: #305add" >{{ $t('licence.equip_edit') }}</el-button>
                <el-button @click="delGateway(scope.row)" type="text" size="small" style="color: #ff2d2d" >{{ $t('licence.del') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="Button">
          <el-button @click="resetForm">{{ $t('licence.upperStep') }}</el-button>
          <el-button type="primary" @click="submitForm">{{ $t('licence.determine') }}</el-button>
        </div>
        <!-- 新增/编辑网关弹框 -->
        <el-dialog center :title="dialogTitle" v-model="dialogGateway">
          <el-form label-position="top" :model="gatewayForm">
            <el-form-item :label="$t('licence.equip_name')">
              <el-input v-model="gatewayForm.gatewayName" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item :label="$t('licence.equip_lable')">
              <el-input v-model="gatewayForm.lable" autocomplete="off" ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
            <el-button @click="dialogGateway = false">{{ $t('licence.cancel') }}</el-button>
            <el-button type="primary" @click="addGateway">{{ $t('licence.determine') }}</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
    import { addGateways, getGatewayLists, editorGateway, delGateways, unBound, delAllInveter,} from "@/api/dianzhan/gatewayList";
    import { paramDelivery } from "@/api/dianzhan/parameter";
    import { useI18n } from 'vue-i18n'
    const route = useRoute()
    const router = useRouter()
    const { t } = useI18n()
    const env = import.meta.env.VITE_APP_ENV
    const GatewayList = ref([]); //网关列表
    const gateway = ref({
      id:0
    }); //网关单个
    const dialogTitle = ref(t("licence.gat_addGateway"));
    // const dialogEquipment = ref(false); //添加设备
    const dialogGateway = ref(false); //新增/编辑网关
    // 网关表单
    const gatewayForm = ref({
      lable:'',
      gatewayName:'',
    });
    const electricId = ref()
    // const lable = ref(''); //输入逆变器添加
    //网关下逆变器列表
    // const inverterList = ref([]);
    // 未绑定的逆变器
    // const EquipmentData = ref([]);
    const lang = ref();
    onMounted(()=>{
      electricId.value = route.query.id ; //单个电站id
        {
        // 获取语言
        if (localStorage.getItem("locale") == "en_US") {
          lang.value = 1;
        } else {
          lang.value = 0;
        }
        // 获取网关列表
        if(electricId.value) getGatewayList();
        else ElMessage.error(t("licence.gat_selectStation"))
      }
    })
    // ==========================================
    // 获取网关列表
    const getGatewayList = async()=> {
      let res = await getGatewayLists(electricId.value);
      GatewayList.value = res.data;
    };
    // 新增弹框展示
    const addShow = ()=> {
      gatewayForm.value = {
        lable: "",
        gatewayName: "",
      };
      dialogTitle.value = t("licence.equip_addE");
      dialogGateway.value = true;
    };
    // 编辑弹框展示
    const editShow = (row:any)=> {
      dialogTitle.value = t("licence.gat_bianjiGateway");
      gatewayForm.value = row;
      dialogGateway.value = true;
    };
    // 弹框新增/编辑网关
    const addGateway = async()=> {
      let res;
      if (dialogTitle.value == t("licence.gat_bianjiGateway")) {
        let data = {
          id: gateway.value.id,
          lable: gatewayForm.value.lable,
          gatewayName: gatewayForm.value.gatewayName,
        };
        res = await editorGateway(data);
        ElMessage.success(t("licence.powe_bainji"));
        getGatewayList();
      } else {
        let data = {
          stationId: electricId.value,
          lable: gatewayForm.value.lable,
          gatewayName: gatewayForm.value.gatewayName,
        };
        res = await addGateways(data);
        ElMessage.success(t("licence.gat_addChengGong"));
        getGatewayList();
      }

      // if (res.code == "200") {
      //   ElMessage.success(gateway.value ? "编辑成功" : "添加成功");
      // }
      gatewayForm.value = {
        lable: "",
        gatewayName: "",
      };
      dialogGateway.value = false;
      getGatewayList();
    };
    // 删除网关
    const delGateway = async(row:any)=> {
      await ElMessageBox.confirm(
        t("licence.SubmitDelGateway"),
        t("licence.Tips"),
        {
          confirmButtonText: t("licence.del"),
          cancelButtonText: t("licence.cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          await delGateways({
            id: row.id,
            lang: lang.value,
          });
          dialogGateway.value = false;
          // 获取网关列表
          getGatewayList();
          ElMessage.success( t("licence.use_deletecheng"));
        })
        .catch(() => {
          // 获取网关列表
          getGatewayList();
        });
    };
    // 删除网关
    const delAllInveters = async(id:number) => {      
      await ElMessageBox.confirm(
        t("licence.DelInverter"),
        t("licence.Tips"),
        {
          confirmButtonText: t("licence.del"),
          cancelButtonText: t("licence.cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          await delAllInveter(id);
          // 获取网关列表
          getGatewayList();
          ElMessage.success( t("licence.use_deletecheng"));
        })
        .catch(() => {
          // 获取网关列表
          getGatewayList();
        });
    }
    // 删除网关
    const unbound = async(row:any)=> {
      await ElMessageBox.confirm(
        t("licence.SubmitUnbound"),
        t("licence.Tips"),
        {
          confirmButtonText: t("licence.del"),
          cancelButtonText: t("licence.cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          await unBound({
            id: row.id,
            lang: lang.value,
          });
          // 获取网关列表
          getGatewayList();
          ElMessage.success(t("licence.equip_success"))
        })
        .catch(() => {
          // 获取网关列表
          getGatewayList();
        });
    };
    // ===========

    // 取消
    const resetForm = ()=> {
      router.go(-1);
    };
    // 确定
    const submitForm = async()=> {
      let data = {
        stationId: electricId.value,
      };
      await paramDelivery(data);
      ElMessage.success(t("licence.gat_addChengGong"));
    };
</script>

<style scoped lang="scss">
* {
  margin: 0;
  box-sizing: border-box;
}
// 网关状态颜色
.color1 {
  color: #305add;
}
.color2 {
  color: #f68d2c;
}
.color3 {
  color: #ff2d2d;
}
.color4 {
  color: #82c918;
}
//按钮颜色
.el-button--primary.is-plain {
  color: #305add;
  background: #e7ebfa;
  border-color: #e7ebfa;
}
// 添加设备按钮
.el-button--primary {
  color: #ffffff;
  background-color: #305add;
  border-color: #305add;
}

.content {
  padding: 30px;
}
.conten {
  width: 1200px;
  // height: 700px;
  background: #ffffff;
  border-radius: 6px;
  margin: auto;
  .T-title {
    padding: 20px 30px 30px 20px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    border-bottom: 1px solid #ececec;
    .title-l {
      display: flex;
      cursor: pointer;
      flex-wrap: wrap;
      flex: 1;
      .title-l-s {
        margin-right: 40px;
        font-size: 16px;
        font-weight: 600;
        margin-top: 10px;
      }
    }
  }
  .active {
    color: #305add;
  }

  //   提交 取消按钮
  .Button {
    margin: auto;
    display: table;
    margin-top: 60px;
  }
  //新增编辑网关弹框
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ececec;
    text-align: left;
  }
  ::v-deep .el-dialog__title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #0e1319;
  }
  ::v-deep .el-dialog {
    width: 28%;
    border-radius: 8px;
  }
  ::v-deep .el-form-item__label {
    float: initial;
  }
  ::v-deep .el-input {
    width: 330px;
  }
  //按钮
  .el-button--danger {
    background-color: transparent;
    color: #ff4949;
  }
  // 添加设备弹框样式
  ::v-deep .el-table--border .el-table__cell {
    border-right: none;
  }
  ::v-deep .el-dialog__wrapper {
    top: 200px;
  }
}
</style>
